<template>
	<view class="groupComboDetails">
        <SRV-topbar title="开通会员等级" :isLeft="true"></SRV-topbar>
		<view class="inner" v-html="config"></view>
        <view class="heng"></view>
		<view class="toplist" v-for="(info,index) in list" :key="index">
		    <view class="title">{{info.title}}</view>
            <view class="more" @click="changeShow(index)">{{showList[index] ? "▼" : "▲"}}</view>
		    <view class="heng"></view>
		    <view class="topnav" v-if="checkShow(index)">
		        <view class="goods2" v-for="(item,index2) in info.productList" :key="index2">
		        	<image :src="item.picture" mode=""></image>
                    <view style="width: 68vw;">
                        <view class="goods2_line">
                            <view class="line_name">
                                <text>{{item.name}}</text>
                            </view>
                        </view>
                        <view class="goods_num1">
                            <view class="goods2_line">
                                <!-- <text class="price_name state_1">会员价</text> -->
                                <text class="sale_price">￥{{item.cost_price}}</text>
                            </view>
                            <view class="uni-numbox">
                                <view class="uni-numbox-minus" :class="disableSubtract ? '' : 'uni-numbox-disabled'"
                                    @click="_calcValue('subtract', index, index2)">-</view>
                                <input class="uni-numbox-value" type="number" :value="numList[index][index2]" disabled="true">
                                <view class="uni-numbox-plus" :class="disableAdd ? '' : 'uni-numbox-disabled'"
                                    @click="_calcValue('add', index, index2)">+</view>
                            </view>
                        </view>
                    </view>
		        </view>
		    </view>
            <view v-if="checkShow(index)">
                <view class="goods_bot" @click="subOpen(index)">购买开通</view>
            </view>
		</view>
        <view class="heng"></view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import {Base64} from '../../static/base64.min.js';
	export default {
		data() {
			return {
				config: "",
                userMoney: 0,
                list: [],
                showList: [],
                numList: [],
			}
		},
		methods: {
			getInfo() {
				serve.request({
					url: '/store/draw/level-config',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
					},
                    v: 'v3'
				})
				.then(res => {
                    if(res.data.state == 1) {
                        uni.redirectTo({
                        	url: res.data.jumpLink
                        });
                        return ;
                    }
                    this.config = Base64.decode(res.data.content).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
                    this.getList();
				});
			},
			getList() {
                serve.request({
                	url: '/store/draw/level-goods',
                	data: {
                		appkey: uni.getStorageSync('appkey'),
                		'access-token': uni.getStorageSync('access-token'),
                	},
                    v: 'v3'
                })
                .then(res => {
                    this.list = res.data.list;
                    this.list.forEach((item, key) => {
                    	this.showList[key] = true;
                        this.numList[key] = [];
                        item.productList.forEach((item2, key2) => {
                            this.numList[key][key2] = 0;
                        });
                    });
                    this.userMoney = res.data.userMoney;
                });
            },
            _calcValue(type, key, key2) {
                let value = this.numList[key][key2];
                let step = 1;
                let max = 3;
                if (type === 'subtract') {
                    value -= step
                } else if (type === 'add') {
                    value = parseInt(Number(value) + Number(step))
                }
                if (value < 0 || value > max) {
                    return
                }
                this.numList[key][key2] = value;
                console.info(this.numList);
                this.$forceUpdate();
            },
            changeShow(key) {
                this.showList[key] = !this.showList[key];
                this.$forceUpdate();
            },
            checkShow(key) {
                return this.showList[key];
            },
            subOpen(index) {
                let num = 0;
                let item = this.list[index];
                var data = '[';
                var drawType = item.title;
                let isSel = false;
                item.productList.forEach((item, key) => {
                    if(this.numList[index][key] <= 0) {
                        return false;
                    }
                    num = Number(num) + this.numList[index][key];
                    if(isSel && key > 0) {
                        data += ',';
                    }
                    data += '{"dataId":'+item.sku_id+',"dataNum":'+this.numList[index][key]+'}';
                    isSel = true;
                });
                data += ']';
                console.info(data);
                if(num != 3) {
                    uni.showToast({
                    	title: "购买产品必须满3件",
                    	icon: 'none'
                    })
                    return;
                }
                this.jump('addOrder', 'type=level_apply&drawType='+drawType+'&data='+data);
            },
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
			this.getInfo();
		},
		onPullDownRefresh() {
			this.getInfo();
		}
	}
</script>

<style scoped lang="scss">
	.groupComboDetails {
		padding-bottom: 186rpx;
		.inner{
			overflow-y:auto;
			overflow-x:hidden;
			width: 98%;
			margin: 1%;
			::v-deep {
			    img,p,span {
			       width: 100%;
			    }
			}
		}
        .toplist {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            padding: 30upx 0upx 20upx 0upx;
            border-bottom: 16upx #eee solid;
        
            .title {
                height: 24upx;
                margin-left: 30upx;
                padding-left: 20rpx;
                position: relative;
                float: left;
                font-size: 30upx;
                // text-align: center;
                line-height: 24upx;
                font-weight: bold;
            }
            .title::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 6upx;
                height: 24upx;
                background: rgba(255, 198, 0, 1);
                border-radius: 2upx;
            }
            .more {
                width: 130upx;
                height: 30upx;
                margin-right: 10upx;
                position: relative;
                float: right;
                font-size: 30upx;
                text-align: center;
                line-height: 24upx;
                font-weight: bold;
            }
            .topnav {
                display: flex;
                box-sizing: border-box;
                // padding-bottom: 30upx;
                // border-bottom: 16upx rgba(251, 251, 253, 0.8) solid;
                flex-wrap: wrap;
                width: 100%;
        
                .list {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 25%;
                    padding: 20rpx 0;
                    color: #23345B;
                    font-size: 24upx;
        
                    image {
                        width: 98upx;
                        height: 97upx;
                    }
                }
        		.goods2 {
        			width: 98vw;
        		    padding-bottom: 30rpx;
        		    border: 6rpx solid #eaeaea;
        		    margin: 10rpx 1% 0 1%;
        		    padding: 10rpx 4rpx;
        		    text-align: center;
        		    border-radius: 10rpx;    
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    
        			image {
        				width: 200upx;
        				height: 200upx;
        		        border: 1rpx solid #eee;
        				border-radius: 2%;
        			}
        			.line_name{
                        text-align: left;
                        padding-left: 10rpx;
                        font-size:30upx;
        				line-height: 50upx;
        				color: #333;
        				text-overflow: -o-ellipsis-lastline;
        				overflow: hidden;
        				text-overflow: ellipsis;
        				display: -webkit-box;
        				-webkit-line-clamp: 2;
        				-webkit-box-orient: vertical;
        			}
        			.goods2_line{
        		        text-align: center;
        			}
        		    .price_name {
        		        font-size: 28rpx;
        		        text-align: right;
        		    }
        		    .sale_price {
        		        font-size: 42rpx;
        		        color: #e61d07;
        		    }
        		    .cost_price {
        		        text-align: right;
        		        // padding-right: 20rpx;
        		        font-size: 26rpx;
        		        color: #615555;
        		    }
        		}
            }
        }
		.goods_num1 {
            padding: 0rpx 30rpx 20rpx 30rpx;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
            font-size: 32upx;
		    .uni-numbox {
                width: 45%;
		        display: flex;
		        flex-direction: row;
		        justify-content: flex-start;
		        border: 1upx solid rgba(60, 72, 104, 0.1);
		        border-radius: 32upx;
		        overflow: hidden;
		    }
		
		    .uni-numbox-minus,
		    .uni-numbox-plus {
		        margin: 0;
		        background-color: #f9f9f9;
		        width: 72upx;
		        height: 60upx;
		        line-height: 60upx;
		        text-align: center;
		        color: #555555;
		    }
		    .uni-numbox-value { 
		        background-color: #ffffff;
		        width: 60upx;
		        height: 60upx;
		        border-right: 1upx rgba(60, 72, 104, 0.06) solid;
		        border-left: 1upx rgba(60, 72, 104, 0.06) solid;
		        text-align: center;
		    }
		    .uni-numbox-disabled {
		        color: #c0c0c0;
		    }
		    .uni-numbox-activity {
		        width: 80upx;
		        height: 60upx;
		        text-align: right;
		        margin-top: 10rpx;
		    }
		}
		.heng{
		    border-bottom: 1rpx #eaeaea solid;
		    width: 100vw;
		    margin-top: 50rpx;
		}
        .goods_bot{
            margin-top: 20rpx;
            width: 100vw;
            height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			text-align: center;
			color: #ffffff;
			background-color: #eccf2a;
			font-size: 36rpx;
			border-top: 1rpx rgba(0, 0, 0, 0.1) solid;
			box-shadow: 1rpx 1rpx 0rpx 0rpx rgba(0, 0, 0, 0.1);
            letter-spacing: 10rpx;
        }
	}
</style>
